How It Was Done

This page explains the most relevant aspects of the process I followed to create the website. Additionally, it details the problems I encountered during this project.

Process Followed

The development of this website involved several key steps:

Planning: I started by outlining the structure and content of the website, including the sections and features I wanted to include.
Design: I created wireframes and mockups to visualize the layout and design of the website. This helped in ensuring a consistent look and feel across all pages.
Development: I wrote the HTML, CSS, and JavaScript code to build the website. This involved creating the layout, styling the elements, and adding interactivity.
Testing: I thoroughly tested the website to ensure it worked correctly on different devices and browsers. This included checking for responsiveness, functionality, and performance.
Deployment: Finally, I deployed the website to a web server, making it accessible to users online.

Problems Encountered

During the development process, I encountered several challenges:

1. Background Video Not Displaying

Initially, the background video was not displaying correctly. The issue was due to the video element not being positioned correctly and other elements overlapping it. I resolved this by setting the video element to a fixed position and ensuring it had a lower z-index than other content.

2. Lottie Animation Not Loading

The Lottie animation was not loading as expected. This was caused by incorrect paths to the JSON files and the animation container not being properly sized. I fixed this by verifying the paths and adjusting the CSS to ensure the container occupied the full viewport.

3. Toggle Switch Alignment

The toggle switch for changing between light and dark modes was not aligned correctly. The issue was due to inconsistent padding and margin settings. I corrected this by standardizing the dimensions and alignment properties in the CSS.

4. Grid Items Misalignment

The grid items in the technologies section were not aligning properly. This was due to extra margins and padding in the grid container and items. I resolved this by removing unnecessary margins and ensuring the grid layout was correctly defined.

5. Delayed Animation Loading

There was a need to add a delay before destroying the current Lottie animation and loading a new one. I implemented this by using the setTimeout function to introduce a delay before calling the destroy method on the current animation.

6. Consistent Styling Across Elements

Ensuring consistent styling across different elements, such as buttons and the toggle switch, was challenging. I achieved this by defining common styles in the CSS and applying them uniformly to all relevant elements.

Conclusion

Throughout the development process, I encountered several challenges, but by systematically addressing each issue, I was able to create a functional and visually appealing portfolio website. This document serves as a record of the problems faced and the solutions implemented.